<template>
  <view class="root">
    <view class="inner">
      <yy-title :title="details.title"></yy-title>

      <view class="content-wrapper">
        <view class="item">
          <view class="item-label">
            提醒时间:
          </view>
          <view class="item-value">
            {{details.reminderTime || '暂无'}}
          </view>
        </view>

        <view class="item">
          <view class="item-label">
            患者姓名:
          </view>
          <view class="item-value">
            {{details.name || '暂无'}}
          </view>
        </view>
        <view class="item">
          <view class="item-label">
            提醒原因:
          </view>
          <view class="item-value">
            {{details.reason || '暂无'}}
          </view>
        </view>

        <view class="item">
          <view class="item-label">
            {{ routerParams.remindType == 11 ? '离线时间:' : '逾期时间:' }}
          </view>
          <view class="item-value">
            {{details.overdueTime || '暂无'}}
          </view>
        </view>

        <view class="item">
          <view class="item-label">
            通知内容:
          </view>
          <view class="item-value">
            {{details.content || '暂无'}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    deviceMessageReminder
  } from '../api/api';
  import {
    getOptionsParams
  } from '../utils/util';

  export default {
    data() {
      return {
        routerParams: {},
        details: {},
        options: {}
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.options = options
      this.initPage()
    },
    methods: {
      initPage() {
        const params = {
          id: this.routerParams.id || this.options.id
        }
        deviceMessageReminder(params)
          .then((res) => {
            this.details = res.result
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    padding: 20rpx 16rpx;

    .inner {
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.16);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 34rpx 20rpx;

      .content-wrapper {
        .item {
          display: flex;
          margin-bottom: 20rpx;

          .item-label {
            font-weight: 500;
            font-size: 28rpx;
            color: #999999;
            flex-shrink: 0;
          }

          .item-value {
            font-weight: bold;
            font-size: 28rpx;
            color: #101010;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
</style>